<template>
  <div>
     <table-title title="课程添加" icon="el-icon-s-grid"></table-title>
      <div class="base_wrap">
        <div class="base_left">
          <el-form label-width="90px" :model="addObj"
          :rules="rules">
              <el-form-item label="课程名称" prop="Cname">
                <el-input v-model="addObj.Cname"></el-input> <span>60字以内</span>
              </el-form-item>
             <el-form-item label="课程描述" prop="Cdescribe">
              <el-input v-model="addObj.Cdescribe"></el-input><span>100字以内</span>
             </el-form-item>
              <el-form-item label="课程价格" prop="Cprice">
                <el-input v-model="addObj.Cprice"></el-input><span>课程以元为单位，免费设置为0</span>
              </el-form-item>
               <el-form-item label="分类" prop="CategoryOne">
                  <el-select v-model="addObj.CategoryOne">
                    <el-option v-for="(item,index) in opt1"
                    :label="item.label" :value="item.value"
                    :key="item.value">
                    </el-option>
                  </el-select>
                  <el-select v-model="addObj.CategoryTwo">
                    <el-option v-for="item in opt2" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                  </el-select>
                    <el-select v-model="addObj.CategoryThree">
                    <el-option v-for="item in opt3" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
               </el-form-item>
               <el-form-item>
                  <el-button v-if="!$route.query.sta" type="success" @click="toSave">保存</el-button>
               </el-form-item>
          </el-form>
        </div>
        <div class="base_right">
          <div class="img_wrap">
              <h1>课程封面</h1>
              <div class="img_con">
                <img :src="imageUrl" alt="">
              </div>
              <div class="img_ctrl">
                <el-link type="primary">取消</el-link>
                <el-link type="success" @click="imgFlag=true">上传</el-link>
              </div>
          </div>
        </div>
        <!-- 课程封面选择的弹出层 -->
        <el-dialog title="课程封面选择" width="50%" :visible.sync="imgFlag">
          <!-- elementui 上传插件 -->
          
              <el-upload  action="/VueHandler/VueHandler/UpLoadPicHandler"
                  :auto-upload="false"
                  ref="myupload"
                    :on-success="getUpData"
                    :on-change="getUpImg"
              >
                 <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else style="font-size:40px; margin-left:40px;" class="el-icon-plus avatar-uploader-icon"></i>
             </el-upload>
            <template slot="footer">
              <div>
                   <el-button @click="toClose" type="danger">取消</el-button>
                   <el-button type="success" @click="toUp">确定</el-button>
              </div>
            </template>
        </el-dialog>
      </div>
  </div>
</template>

<script>
import {courseAddApi,getCourseInfo,saveAllApi} from '../../../api/course'
import cateObj from '../../../mixins/cate.js'
export default {
  name: 'Vuepro2209CourseBase',
  mixins:[cateObj], //混入进来的内容
  data() {
    return {
      courseInfo:{},//课程信息
      dirList:[],//目录列表
      imgFlag:false, //上传课程封面
      imageUrl:"",//选择的图片的地址的缩略图
      addObj:{ 
         
          Cname:"", //课程名称
          Cdescribe:"", //课程描述
          Cprice:"", //课程价格
          CategoryOne:"",//一级分类
          CategoryTwo:"",//二级分类
          CategoryThree:"",//三级分类
          Cpic:"",//上传成功后后台返回的图片地址
          Cdetails:"",//富文本编辑器的内容
      },
      rules:{
        Cname:[{required:true,message:"课程名称必填",trigger:"blur"}],
        Cdescribe:[
          {required:true,message:"课程描述必填",trigger:"blur"},
          {min:5,max:20,message:"输入长度不符合规则",trigger:"blur"}
        ],
        Cprice:[{pattern:/^\d{1,5}$/,message:"价格不符合规则",trigger:"blur"}],
        CategoryOne:[{required:true,message:"一级分类必选",trigger:"blur"}],
        CategoryTwo:[{required:true,message:"二级分类必选",trigger:"blur"}],
        CategoryThree:[{required:true,message:"三级分类必选",trigger:"blur"}],
      }
    };
  },
  created(){
    // 进入组件调用回显方法
    // 如果地址栏有ID 回显
      if(this.$route.query.ID){
        this.getCourse();
      }
      // 监听兄弟组件 获取信息
      this.$bus.$on("getdir",(val)=>{
          // 重新获取课程
            this.getCourse();
      })
      // 监听兄弟组件 要整合体保存操作
      this.$bus.$on('sendEditor',(val)=>{
        this.addObj.Cdetails=val;//接收富文本的内容
        // 调用整体保存方法
        this.saveAllCourse();
      })
  },
  mounted() {
    
  },

  methods: {
 async  saveAllCourse(){ //课程整体保存的接口
    this.addObj._id=this.$route.query._id;
    let res=await saveAllApi(this.addObj)
    console.log(res)
      if(res.data.success){
        this.$message.success("课程保存成功")
        // 添加成功跳转课程列表页
        this.$router.push("/layout/courseList")
      }
  },
  getCourse(){ //进入页面获取课程信息
      // 调用课程信息接口
      getCourseInfo(this.$route.query.ID).then(res=>{
        console.log(res,"----------999")
        this.addObj=res.data.data.courselist;
        this.dirList=res.data.data.dirlist; //返回的目录数据
        // 用eventbus的方式传给目录列表那个组件目录数据
        this.$bus.$emit('sendDir',this.dirList)
        // 传递富文本编辑器的回显
        this.$bus.$emit('sendMyDes',res.data.data.courselist.Cdetails)
        // 给课程封面赋值
        this.imageUrl='http://127.0.0.1:3000'+res.data.data.courselist.Cpic;
        // 父传子改变遮罩层
        this.$parent.viewFlag=false;
      })

  },
   async  toSave(){ //课程添加 保存课程基本信息
      if(this.addObj.Cpic){//判断是否上传课程封面
          let res=await courseAddApi(this.addObj)
          console.log(res,'-----------');
          if(res.data.success){
            this.$message.success("添加成功")
            // 遮罩更换
            this.$parent.viewFlag=false;
            this.$bus.$emit("sendCover",true)
            // 将后台返回的课程ID 存储到地址栏
            this.$router.push({name:"courseAdd",query:{
              ID:res.data.ID, //课程的ID
              _id:res.data._id//课程的_id
            }})
          }
      }else{
        this.$message.error("请先上传课程封面")
      }
 
    },
    toClose(){ //取消上传
       this.imgFlag=false;
       this.imageUrl=""
    },
    toUp(){ //点击确定 手动触发上传
      this.imgFlag=false;
      // 触发上传组件的 提交
      this.$refs.myupload.submit()
    },

    getUpData(res){ //上传封面成功的回调函数
      console.log(res,"--------8888")
      if(res.success){
        this.$message.success("上传成功")
        // 存储后台上传成功后返回的数据
        this.addObj.Cpic=res.cacheName;
      }
    },
    getUpImg(file){ //获取到的文件 生成缩略图
        console.log(file)
        // 原生的缩略图
        let imgUrl=URL.createObjectURL(file.raw)
        console.log(imgUrl)
        this.imageUrl=imgUrl;
    }
  },
};
</script>
<style lang="less" scoped>
  .base_wrap{
    display:flex;
    height:450px;
    .base_left{
      width:55%;
       height:450px;
       background:skyblue;
        .el-form-item{
          margin-top: 40px;
        }
          .el-form-item__content{
        
        display: flex;
        .el-input{
          width: 400px;
        }
        span{
          margin-left: 30px;
        }
        .el-select{
          width: 120px;
          margin-right: 40px;
          .el-input{
            width: 120px;
          }
        }
       }
    }
    .base_right{
        width:45%;
        height:450px;
        background:pink;
        .img_wrap{
          width: 300px;
          height: 400px;
          margin-left: 50px;
          h1{
            font-size: 20px;
          }
          .img_con{
            width: 300px;
            height: 300px;
            border:  2px solid red;
            img{
               width: 300px;
               height: 300px;
            }
          }
          .img_ctrl{
             width: 300px;
            display: flex;
            justify-content: space-between;
            .el-link{
              font-size: 20px;
            }
          }
        }
    }
  }
</style>
<style lang="less">
    .avatar{
      width:300px;
      height:300px;
    }
</style>